<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>新用户注册</title>
    <link rel="stylesheet" href="<c:url value='/resource/css/common.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/bootstrap.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/style.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/animate.min.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/darktooltip.css'/>">
    <script src="<c:url value='/resource/js/lib/jquery-3.1.0.js'/>"></script>
    <script src="<c:url value='/resource/js/common.js'/>"></script>
    <script src="<c:url value='/resource/js/toastr.js'/>"></script>
    <link rel="stylesheet" href="<c:url value='/resource/css/toastr.min.css'/>">
    <script src="<c:url value='/resource/js/rsa/Barrett.js'/>"></script>
    <script src="<c:url value='/resource/js/rsa/BigInt.js'/>"></script>
    <script src="<c:url value='/resource/js/rsa/RSA.js'/>"></script>

</head>

<body class="register-bg">
<div class="register-header">
    <div class="container">
        <div class="row">
            <div class="col-xs-8">
                <h1 class="register-logo"><span>新用户注册</span></h1>
            </div>
            <div class="col-xs-4">
                <a href="<c:url value='/'/>" class="register-back">返回首页</a>
            </div>
        </div>
    </div>
</div>
<div class="container re-main">
    <div class="row">
        <div class="col-md-7">
            <div class="re-area">
                <div class="re-item">
                    <input type="text" id="acountId" placeholder="手机号码" class="re-phoneNumber">
                    <div class="prompt-text phoneNumber-text">请输入正确的手机号</div>
                </div>
                <div class="re-item">
                    <input type="password" id="password"  placeholder="登录密码" class="re-password01" data-tooltip="6-40个字符,大小写英文、数字、符号组合，但不能单独使用" >
                    <div class="prompt-text pwdMsg-text"></div>
                    <div class="strongAndWeak">
                        <ul>
                            <li>危险</li>
                            <li>一般</li>
                            <li>安全</li>
                        </ul>
                        <p><span>危险</span><span>一般</span><span>安全</span></p>
                    </div>
                </div>
                <div class="re-item">
                    <input type="password" id="repassword" placeholder="确认密码" class="re-password02">
                    <div class="prompt-text pwdMsg02-text"></div>
                </div>
                <div class="re-item">
                    <input type="text" value="" id="code" placeholder="请输入验证码" class="re-code">
                    <button class="btn" id="get_code">获取验证码</button>
                    <div class="prompt-text"></div>
                </div>
                <div class="re-dragArea">
                    <div class="re-succeed"></div>
                    <div class="re-dragBlock"><span class="glyphicon glyphicon-arrow-right"></span></div>
                    <div class="re-dragLock">
                        <span>请按住滑块，拖动到最右边</span>
                    </div>
                </div>
                <div class="re-agreement">点击注册，表示您同意<a href="javascript:;" onClick="$('#re-agreement-modal').modal()">《便民服务平台服务协议》</a></div>
                <div class="re-agreement-btn"><button class="btn btn-green btn-block">同意协议并注册</button></div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="re-loginArea">
                <div class="re-la-hd">
                    已有账号？ <button class="btn btn-blue login-btn login-a">立即登录</button>
                </div>
                <div class="re-la-ewm"><img src="<c:url value='/resource/images/ewm.jpg'/>"><p>扫描下载掌上公安APP</p></div>
                <div class="re-la-otherLogin">
                    <p>使用第三方帐号登录</p>
                    <a href="#" class="re-la-qq"><i></i>QQ</a>
                    <a href="#" class="re-la-sina"><i></i>新浪微博</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="re-footer">
    <p>Copyright©2011-2014版权所有 云政网络 苏ICP备10023489-1号<span id="testcode"></span></p>
</div>

<!--模态框 协议-->
<div class="modal fade" id="re-agreement-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">便民服务平台服务协议</h4>
            </div>
            <div class="modal-body">
                这里是协议...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">同意</button>
            </div>
        </div>
    </div>
</div>
<script src="<c:url value='/resource/js/require.js'/>" data-main="<c:url value='/resource/js/main'/>" id="current-page" current-page ="register"></script>

<script>
    $(function(){
        $("#get_code").click(function () {
            var phone=$("#acountId").val();
            if(phone==''||phone==null){
                toast("手机号不能为空");
                return;
            }
            $.ajax({
                type:'get',
                url:"<c:url value='/members/sms_code'/>",
                data:{
                    phone:phone,
                    source:"register"
                },
                success:function(res){
                    if(res.succ){
                        $("#testcode").html(res.data);
                        toast("已发送验证码");
                    }else{
                        toast(res.msg);
                    }
                },
                error:function (res) {
                    toast("服务器异常");
                }
            });
        });
        $('.re-agreement-btn').click(function() {
            if($('#password').val()!=$('#repassword').val()){
                toast("请确认密码");
                return;
            }
            var code=$("#code").val();
            $.ajax({
                type: 'POST',
                url: "<c:url value='/members'/>",
                data:JSON.stringify({
                    code:code,
                    source:"register",
                    acountId:$('#acountId').val(),
                    password:getEncrypted($('#password').val())
                }),
                contentType: 'application/json;charset=utf-8',
                dataType:"json",
                success: function(res){
                    if(!res.succ){
                        toast(res.msg);
                    }else{
                            window.parent.location="<c:url value='/usercenter/index?to=userinfo'/>";
                    }
                },
                error:function(res){
                    toast("服务器异常");
                }
            });

        });
    });
    function getEncrypted(data) {
        setMaxDigits(130); //1024位就是130，2048位就是260.。。。。。。
        var key1 = new RSAKeyPair("${e}","","${n}");	//从服务端获取到的n和e可以得出公钥
        var encode_content = encodeURIComponent(data);
        var encryptData = encryptedString(key1,encode_content);
        return encryptData;
    }
</script>
</body>
</html>
